<template>
  <view v-if="noticeType" class="order-status-desc">
    <view class="wrapper">
      <basic-icons name="icon52" size="32rpx"></basic-icons>

      <!-- 支付，已取消 -->
      <view v-if="noticeType === 1" class="content">
        <text>订单已取消，订单费用将于1-2个工作日内原路退还，详情查看</text>
        <text @click="$emit('showRefundDetail')" class="link-style">退款记录</text>
      </view>

      <!-- 退款取消中 -->
      <view v-else-if="noticeType === 2" class="content">
        订单退款申请已提交，请耐心等待。
      </view>

      <!-- 退款申请被驳回 -->
      <view v-else-if="noticeType === 3" class="content">
        <view>取消申请被驳回</view>
        <view>
          <text>原因：{{orderInfo.refuseReasonStr || '不符合取消规则'}}</text>
          <text @click="$emit('showRefundDetail')" class="link-style">退款记录</text>
        </view>
      </view>
    </view>
    
  </view>
</template>
<script>
import noticeBar from '@/components/business/notice-bar'
import { REFUND_STATUS } from '@/model/enum'
export default {
	name: 'order-status-desc',
	props: {
    orderInfo: {
      type: Object,
      default: () => ({})
    }
	},
	data() {
		return {
		}
  },
  computed: {
    /**
     * 提示信息类别 0：不显示  1：支付，已取消 2：退款取消中 3：退款申请被驳回
     */
    noticeType() {
      if (this.orderInfo.refundStatus === REFUND_STATUS.SUCCEED) {
        return 1
      } else if (this.orderInfo.refundStatus === REFUND_STATUS.REFUNDING) {
        return 2
      } else if (this.orderInfo.refundStatus === REFUND_STATUS.FAIL) {
        return 3
      }

      return 0
    }
  }
}
</script>
<style lang="less">
.order-status-desc {
  color: #FF9F00;
  background-color: #ffffff;

  .wrapper {
    .flex;
    .flex-middle;

    height: 100rpx;

    background-color: #FFEED2;
    padding: 0 30rpx;
  }

  .content {
    .flex-1;
    color: @font_light_color;
    margin-left: 20rpx;
  }

  .link-style {
    text-decoration: underline;
    color: #2C8AE2;
  }
}
</style>